<template>
    <div id="keywords" class="content">
        <div class="main_top">
            <el-button class="btn" type="primary" @click="dialogFormVisible = true">增加关键字</el-button>
        </div>
        <el-dialog style=" overflow: hidden !important;" top='7vh' :modal-append-to-body="flag" title="增加关键词"
            :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="必须包含关键字" :label-width="formLabelWidth">
                    <el-input v-model="form.keyword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="可包含关键字" :label-width="formLabelWidth">
                    <el-input v-model="form.may_keyword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="不包含关键字" :label-width="formLabelWidth">
                    <el-input v-model="form.nokeyword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="监控评率" :label-width="formLabelWidth">
                    <el-input v-model="form.frequency" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="doPostKeywords()">确 定</el-button>
            </div>
        </el-dialog>

        <div class="electron-table">
            <table class="pageTable">
                <tr>
                    <th>标题/地址</th>
                    <th>必须包含词</th>
                    <th>可包含词</th>
                    <th>不包含词</th>
                    <th>监控频率</th>
                    <th>负面数</th>
                    <th>舆情总数</th>
                    <th>下次更新时间</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>
                        <a href="#">企业舆情</a>
                    </td>
                    <td>
                        天然气公司扁平化管理
                    </td>
                    <td></td>
                    <td></td>

                    <td>0分</td>
                    <td><a href="#">负面：0</a></td>
                    <td><a href="#">1</a></td>
                    <td>2014-07-21 16:00:01</td>
                    <td><a href="#" class="leftA">查看内容</a><a href="#" class="rightA">编辑</a></td>
                </tr>
                <tr>
                    <td>
                        <a href="#">企业舆情</a>
                    </td>
                    <td>
                        天然气公司扁平化管理
                    </td>
                    <td></td>
                    <td></td>

                    <td>0分</td>
                    <td><a href="#">负面：0</a></td>
                    <td><a href="#">1</a></td>
                    <td>2014-07-21 16:00:01</td>
                    <td><a href="#" class="leftA">查看内容</a><a href="#" class="rightA">编辑</a></td>
                </tr>
                <tr>
                    <td>
                        <a href="#">企业舆情</a>
                    </td>
                    <td>
                        天然气公司扁平化管理
                    </td>
                    <td></td>
                    <td></td>

                    <td>0分</td>
                    <td><a href="#">负面：0</a></td>
                    <td><a href="#">1</a></td>
                    <td>2014-07-21 16:00:01</td>
                    <td><a href="#" class="leftA">查看内容</a><a href="#" class="rightA">编辑</a></td>
                </tr>
            </table>
            <div class="page">
                <el-pagination @current-change="pageChange($event)" background layout="prev, pager, next" :total="100">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import Storage from '../module/Storage';
    import Api from '../module/domain_name';
    import Md5 from '../module/Md5';
    export default {
        name: 'home',
        data() {
            return {
                dialogFormVisible: false,
                // 用于存储用户输入
                form: {},
                flag: false,
                formLabelWidth: '120px'
            };
        },
        methods: {
            doPostKeywords() {
                //   获取到用户ID  在本地存储localStorage
                const userinfo = Storage.get('userinfo');
                // 签名的实现
                var sign = Md5.sign({
                    // api接口中地址要拼接上去,因为所有api都有M,所有在这里就不签名了
                    // http://www.apiying.com/yuqing/index.php?m=Api&a=addKeywords
                    'a': 'addKeywords',
                    'uid': userinfo.id, //用户id需要前面
                    'salt': userinfo.salt //私钥  不要传入到URL中
                    // 如果是删除信息的话，我们还需要签名删除的id。建议提交的所有数据都签名，sign除外
                })
                // 建议正式项目中签名所有字段(支付之类的项目) -- 更安全

                // 执行提交数据  axios
                this.$http.post(Api.keywordApi, {
                        keyword: this.form.keyword,
                        may_keyword: this.form.may_keyword,
                        nokeyword: this.form.nokeyword,
                        frequency: this.form.frequency,
                        uid: userinfo.id,
                        sign: sign //签名为了数据的安全性
                    })
                    .then((response) => {
                        if (response.data.success) {
                            this.dialogFormVisible = false;
                        } else {
                            this.$message({
                                message: response.data.message,
                                type: 'warning'
                            });
                        }
                    })
                    .catch((error) => {
                        this.$message({
                            message: error,
                            type: 'warning'
                        });
                    });
            },
            getKeywordlist() {
                //   获取到用户ID  在本地存储localStorage
                const userinfo = Storage.get('userinfo');
                // 签名的实现
                var sign = Md5.sign({
                    'a': 'Keywordlist',  //改成对应的参数值
                    'uid': userinfo.id,
                    'salt': userinfo.salt //私钥  不要传入到URL中
                })
                // 根据接口来传递参数的，文档要求uid和sign要传递过去
                const api = `${Api.getkeywordApi}&uid=${userinfo.id}&sign=${sign} `;
                // 执行提交数据  axios
                this.$http.get(api)
                    .then((response) => {
                        console.log(response);
                    })
                    .catch((error) => {
                        this.$message({
                            message: error,
                            type: 'warning'
                        });
                    });

            }
        },
        mounted() {
            this.getKeywordlist();
        },
    }
</script>

<style lang='scss'>


</style>